<template>
    <div class="shareYk">
        <div class="shareCode">
            <img class="titleImg" src="@/assets/shreRegister/shareTop.png" />
            <div class="shareContent" ref="shareContent">
                <div class="shareTIt">
                    <div class="titbg">
                        <div>
                            <div class="agentName">{{ store.state.user.userInfo.agentBean.agentName }}</div>
                            <div style="font-size: 12px">邀请您加入</div>
                        </div>
                    </div>
                </div>
                <div class="code">
                    <qrcode-vue :value="codeUrl" :size="238"></qrcode-vue>
                    <div style="margin-top: 10px">邀请码</div>
                    <div style="color: #66d6ff; margin-top: 8px">{{ route.query.inviterCode }}</div>
                </div>
            </div>
            <!-- <div class="btnGroup">
                <div class="btnItem" @click="goDown">
                    <img src="@/assets/yk/save.png" />
                    <div>保存相册</div>
                </div>
                <div class="btnItem" @click="onCopy">
                    <img src="@/assets/yk/copyUrl.png" />
                    <div>复制链接</div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import QrcodeVue from 'qrcode.vue'
import html2canvas from 'html2canvas'
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'
import { useRoute } from 'vue-router'
import {developHost,productionHost} from '@/constant'
import store from '../../store'
const shareContent = ref()
const route = useRoute()
const codeUrl = `https://open.lianzhongbao.cn:18091/shareregister?shareCode=${route.query.inviterCode}&appVersion=1.0.0&agencySource=${store.state.user.userInfo.agentBean.agencySource}`
const goDown = () => {
    // document.querySelector() document.getElementById
    // html2canvas(绑定的元素,{})
    // 海报图默认是  2倍尺寸
    html2canvas(shareContent.value, {
        backgroundColor: '#f5f5f5', //海报的背景颜色
        useCORS: true // 允许跨域
    }).then(canvas => {
        // canvas 其实就是我们所讲的res 的意思 返回报文的意思
        let baseImg = canvas.toDataURL('image/png')
        showConfirmDialog({
            title: '分享下载',
            message: '确定下载当前分享图至相册嘛？'
        })
            .then(() => {
                saveImgFile(baseImg)
            })
            .catch(() => {})
    })
}
const saveImgFile = baseImg => {
    const bitmap = new plus.nativeObj.Bitmap('test')
    bitmap.loadBase64Data(
        baseImg,
        function () {
            const url = '_doc/' + new Date().getTime() + '.png' // url为时间戳命名方式
            bitmap.save(
                url,
                {
                    overwrite: true // 是否覆盖
                },
                i => {
                    plus.gallery.save(
                        i.target,
                        function () {
                            console.log('图片保存至相册成功')
                            showSuccessToast('图片保存至相册成功')
                            bitmap.clear()
                        },
                        function (e) {
                            showToast('图片保存至相册失败')
                            console.log('图片保存至相册失败:' + JSON.stringify(e))
                            bitmap.clear()
                        }
                    )
                },
                e => {
                    console.log('图片保存失败1')
                    showToast('图片保存失败1')
                    bitmap.clear()
                }
            )
        },
        e => {
            console.log('图片保存失败2')
            showToast('图片保存失败2')
            bitmap.clear()
        }
    )
}
const onCopy = () => {
    const copyText = codeUrl
    const input = document.createElement('input')
    input.value = copyText
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
    showToast('复制成功');
}
</script>
<style scoped lang="scss">
.shareYk {
    min-height: 100vh;
    background: url('@/assets/shreRegister/ykShare.png') no-repeat top left / 100% 100%;
    .shareCode {
        width: 80vw;
        padding-top: 44px;
        margin: 0 auto;
        .titleImg{
            width: 213px;
            height: 100px;
            margin-bottom: 38px;
        }
        .shareTIt {
            padding: 3px;
            background: #ffffff;
            .titbg {
                display: flex;
                align-items: center;
                padding: 15px 11px;
                background: url('@/assets/shreRegister/shareInfoBg.png') no-repeat top left / 100% 100%;
                color: #ffffff;
                .headPhoto {
                    width: 42px;
                    height: 42px;
                    margin-right: 10px;
                }
                .agentName {
                    width: 39vw;
                    font-size: 14px;
                    margin-bottom: 8px;
                    overflow: hidden; //超出隐藏
                    text-overflow: ellipsis; //文本超出时显示省略号
                    white-space: nowrap; //设置文本不换行
                }
            }
        }
        .code {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 25px;
            background: #ffffff;
            border-radius: 0px 0px 6px 6px;
        }
        .btnGroup {
            display: flex;
            justify-content: space-around;
            margin-top: 25px;
            .btnItem {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #ffffff;
                img {
                    width: 32px;
                    height: 32px;
                    margin-bottom: 12px;
                }
            }
        }
    }
}
</style>
